/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView
} from 'react-native';

export default class PullRefreshDemo extends Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: this.ds.cloneWithRows(['row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2']),
      isPullToRefresh:false,

    }
  }
  render() {
    return (
      <View style={{backgroundColor:'#ebebeb'}}>
      <View style={{height:64,backgroundColor:'yellow',borderBottomWidth:1,borderBottomColor:'black'}}></View>
      <ListView 
        ref={(list)=>{this.list=list}}
        style={{backgroundColor:'#ebebeb'}}
        renderRow={this.renderRow.bind(this)}
        dataSource={this.state.dataSource}
        /*是否加载原生下拉组件*/
        enablePullToRefresh={true}
        /*控制刷新状态*/
        isPullToRefresh={this.state.isPullToRefresh}
        /*下拉刷新加载数据的回调函数*/
        onRefreshData={this.loadData.bind(this)}
      />
      </View>
    );
  }
  renderRow(data){
    return (
      <View style={{marginBottom:10,width:'100%',backgroundColor:'green',height:50,justifyContent:'center',alignItems:'center'}}>
        <Text style={{fontSize:20}}>{data}</Text>
      </View>
    )
  }
  loadData(){
    // 因为isPullToRefresh默认为false，如果不先设置为true,那么render方法不会刷新
    this.setState({isPullToRefresh:true})

    setTimeout(()=>{
      this.setState({
        isPullToRefresh:false
      })
    },2000)
  }
}


AppRegistry.registerComponent('PullRefreshDemo', () => PullRefreshDemo);
